import React, { Fragment, PureComponent } from 'react';
import { connect } from 'dva';
import { Link } from 'dva/router';
import { Card, Row, Col, Button, Avatar, Modal, Divider } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import DragSortingTable from './DragSortingTable';
import styles from './BasicList.less';
import {
  progType,
  progSpeed,
  progEntrAnimat,
  progExitAnimat,
  progSound,
  progAudit,
} from '../../utils/city';

const Info = ({ title, value, bordered }) => (
  <div className={styles.headerInfo}>
    <span>{title}</span>
    <p>{value}</p>
    {bordered && <em />}
  </div>
);

@connect(({ list, loading }) => ({
  list,
  loading: loading.models.list,
}))
export default class ProgramConfig extends PureComponent {
  componentDidMount() {
    const { progId } = this.props.match.params;
    this.props.dispatch({
      type: 'list/fetchProgramDet',
      payload: {
        progId,
      },
    });
    this.props.dispatch({
      type: 'list/fetchMatList',
      payload: {
        progId,
      },
    });
  }

  onRow = (dragIndex, hoverIndex) => {
    this.props.dispatch({
      type: 'list/resort',
      payload: {
        dragIndex,
        hoverIndex,
      },
    });
  };
  onSubmit = () => {
    const {
      list: { matList },
    } = this.props;
    Modal.confirm({
      title: '确认提交',
      content: '确认要提交所有素材进行审核么？提交前请确认顺序正确',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk: () => {
        const { progId } = this.props.match.params;
        //console.log('submit list', matList);
        const jsonCont = {};
        jsonCont.progId = progId;
        jsonCont.matSns = [];
        for (let i = 0; i < matList.length; i++) {
          jsonCont.matSns.push({ matId: matList[i].matId, playSn: i + 1 });
        }
        //console.log('jsonCont', jsonCont);
        this.props.dispatch({
          type: 'list/addProgMatSns',
          payload: { jsonCont: JSON.stringify(jsonCont) },
          callback: () => {
            this.props.history.push(`/program/programdetail/${progId}`);
          },
        });
      },
    });
  };
  delMat = matId => {
    const { progId } = this.props.match.params;
    // //console.log('progName matId', progName, item.matId);
    this.props.dispatch({
      type: 'list/delProgramMat',
      payload: {
        progId,
        matId,
      },
    });
  };
  render() {
    const {
      list: { matList, programInfo },
      loading,
    } = this.props;
    const { progId } = this.props.match.params;
    //console.log('progid,pramlist', this.props.match.params.progId, matList);
    const loadMore = (
      <div
        style={{
          textAlign: 'center',
          marginTop: 12,
          height: 32,
          lineHeight: '32px',
        }}
      >
        <Button type="primary" onClick={this.onAudit}>
          审核
        </Button>
      </div>
    );

    const columns = [
      {
        title: '缩略图',
        dataIndex: 'matThumUrl',
        key: 'matThumUrl',
        render: item => <Avatar shape="square" size="large" src={item} />,
      },
      {
        title: '素材名',
        dataIndex: 'fileName',
        key: 'fileName',
      },
      {
        title: '播放类型',
        dataIndex: 'playType',
        key: 'playType',
      },
      {
        title: '播放周期',
        dataIndex: 'playDtPeriod',
        key: 'playDtPeriod',
      },
      {
        title: '素材时长',
        dataIndex: 'matTimeLen',
        key: 'matTimeLen',
      },
      {
        title: '优先级',
        dataIndex: 'priority',
        key: 'priority',
      },
      {
        title: '入场动画',
        dataIndex: 'entrAnimat',
        key: 'entrAnimat',
        render: value => <span>{progEntrAnimat[value]}</span>,
      },
      {
        title: '结束动画',
        dataIndex: 'exitAnimat',
        key: 'exitAnimat',
        render: value => <span>{progExitAnimat[value]}</span>,
      },
      {
        title: '帧率',
        dataIndex: 'frameRate',
        key: 'frameRate',
      },
      {
        title: '节目声音',
        dataIndex: 'sound',
        key: 'sound',
        render: value => <span>{progSound[value]}</span>,
      },
      {
        title: '播放时长',
        dataIndex: 'playTimeLen',
        key: 'playTimeLen',
      },
      {
        title: '操作',
        dataIndex: 'matId',
        render: matId => {
          return (
            <Fragment>
              <Link
                to={{
                  pathname: `/program/programmatdet/${progId}/${matId}`,
                  state: { view: false },
                }}
              >
                编辑
              </Link>
              <Divider type="vertical" />
              <a onClick={() => this.delMat(matId)}>删除</a>
            </Fragment>
          );
        },
      },
    ];

    return (
      <PageHeaderLayout>
        <div className={styles.standardList}>
          <Card bordered={false}>
            <Row>
              <Col sm={6} xs={24}>
                <Info title="节目名称" value={programInfo.progName} bordered />
              </Col>
              <Col sm={6} xs={24}>
                <Info title="尺寸" value={programInfo.progSize} bordered />
              </Col>
              <Col sm={6} xs={24}>
                <Info title="作者" value={programInfo.progAuthor} bordered />
              </Col>
              <Col sm={6} xs={24}>
                <Info title="素材总数" value={matList.length} />
              </Col>
            </Row>
          </Card>

          <Card
            className={styles.listCard}
            bordered={false}
            title="素材列表"
            style={{ marginTop: 24 }}
            bodyStyle={{ padding: '0 32px 40px 32px' }}
            // extra={extraButton}
          >
            <Row className={styles.tableListOperator} style={{ marginTop: 10, marginBottom: 10 }}>
              <Col span={12}>
                <Button
                  type="primary"
                  onClick={() => {
                    const progId = this.props.match.params.progId;
                    this.props.history.push(`/basic-form/${progId}`);
                  }}
                  style={{ marginRight: 10 }}
                >
                  添加素材
                </Button>
                <Button type="primary" onClick={this.onSubmit} style={{ marginRight: 10 }}>
                  提交审核
                </Button>
              </Col>
            </Row>
            <DragSortingTable
              progId={this.props.match.params.progId}
              pagination={false}
              loading={loading}
              dataSource={this.props.list.matList}
              columns={columns}
              onRow={this.onRow}
            />
          </Card>
        </div>
      </PageHeaderLayout>
    );
  }
}
